<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
        <hr>
        <student></student>
    </div>
</body>

<script>
    //创建school组件
    const school =Vue.extend({
        template:`
           <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点我提示学校名</button>
           </div>`,
        //一定不要写el配置项，因为最终都要被一个vm管理
        data(){
            return{
                schoolName:'****',
                address:'杭州',
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        }
    })
    //创建student组件
    const student =Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>`,
        //一定不要写el配置项，因为最终都要被一个vm管理
        data(){
            return{
                studentName:'Gui',
                age:20
            }
        }
    })

    //第一步：创建hello组件
    const hello=Vue.extend({
        template:`
            <div>
                <h3>hello,{{name}}</h3>
            </div>`,
        data(){
            return{
                name:'Tom'
            }
        }
    })
    //第二部：全局注册hello
    Vue.component('hello',hello)


    //创建vm
    new Vue({
        el:'#root',
        components:{
            //key:value
            //前面的为组件真实的名字
            //局部注册
            school,
            student
        }
    })
</script>

</html>